<template>
  <div>
    <div class="block">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in img" :key="item">
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="nav">
      <ul>
        <router-link to="/home/newslist" tag="li"><img src="../images/menu1.png"><p>新闻资讯</p></router-link>
        <router-link to="/home/photo" tag="li"><img src="../images/menu2.png"><p>图片资讯</p></router-link>
        <router-link to="/home/goodslist" tag="li"><img src="../images/menu3.png"><p>商品购买</p></router-link>
        <router-link to="/home/photoinfo/39" tag="li"><img src="../images/menu4.png"><p>新闻资讯</p></router-link>
        <router-link to="/home/newsinfo/14" tag="li"><img src="../images/menu5.png"><p>新闻资讯</p></router-link>
        <router-link to="/home/photoinfo/40" tag="li"><img src="../images/menu6.png"><p>新闻资讯</p></router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import {getlunbo} from '@/api/'
export default {
    data() {
        return {
            img:[]
        }
    },
    created() {
        // this.axios('http://www.lovegf.cn:8899/api/getlunbo').then(res=>{
        //     res.data.message.forEach(item => {
        //         this.img.push(item.img)
        //     });
        // })
        getlunbo().then(res=>{
          res.data.message.forEach(item => {
                this.img.push(item.img)
            });
        })
    },
}
</script>

<style lang="less" scoped>
.block{
    img{
        width: 100%;
        height: 100%;
    }
}
.nav{
  overflow: hidden;
  background-color: #fff;
  text-align: center;
  li{
    box-sizing: border-box;
    padding: 10px;
    float: left;
    width: 33.3%;
    img{
      display: inline-block;
      width: 40%;
    }
  }
}
/deep/li{
  list-style: none;
}
*{
  padding: 0;
  margin: 0;
}
</style>

